<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title text="博客文章专栏'"></title>
    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <!--Layui-->
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
    <!--font-awesome-->
    <link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
    <!--全局样式表-->
    <link th:href="@{/css/global.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" />
    <!-- 本页样式表 -->
    <link th:href="@{/css/article.css}" rel="stylesheet" />
    <link th:href="@{/css/blog.css}" rel="stylesheet" />

    <link rel="stylesheet" th:href="@{/css/master.css}" />
    <link rel="stylesheet" th:href="@{/css/gloable.css}" />
    <link rel="stylesheet" th:href="@{/css/nprogress.css}" />
    <link rel="stylesheet" th:href="@{/css/message.css}" />
    <!-- jquery -->
    <script th:src="@{/js/jquery.min.js}"></script>
</head>

<body>
<!--导航栏-->
<div th:insert="~{/front/commons/commons.html :: top}"></div>

<div class="blog-body">
    <div class="blog-container">
        <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
            <a href="userIndex.html" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
            <a><cite>问答专栏</cite></a>
        </blockquote>
        <div class="blog-main">

     <div id="parentArticleList" class="blog-main-left animated slideInLeft">
     <div class="flow-default" id="articleList">
       <div class="article shadow animated zoomIn" th:each="article:${ArticleList.records}">
    <!--文章图片简介-->
     <div class="article-left">
        <img th:src="@{/common/download/topicPicture/} + ${article.titlePicture}" th:alt="网络丢失">
    </div>
    <!--文章类型和标题-->
    <div class="article-right">
        <div class="article-title">
            <span class="article_is_top" th:if="${article.isOrigin == 0}">原创</span>&nbsp;
            <span class="article_is_yc" th:if="${article.isOrigin == 1}">搬运</span>&nbsp;
            <a th:href="@{/article/detail/} + ${article.id}" th:text="${article.title}"></a>
        </div>
        <!--展示文章简介，30个字符-->
        <div class="article-abstract">
            <a th:href="@{/article/detail/} + ${article.id}" th:text="${article.content.substring(0, 30)}"></a>
        </div>
    </div>
    <div class="clear"></div>
    <div class="article-footer">
        <span><i class="fa fa-clock-o" th:text="${article.publicTime}"></i>&nbsp;&nbsp;</span>
        <a th:href="@{/user/detailToOther/article/} + ${article.user.id}" class="article-author" th:text="${article.getUser().getUsername()}"><i class="fa fa-user"></i>&nbsp;&nbsp;</a>
        <span><i class="fa fa-tag"></i>&nbsp;&nbsp;<a th:text="${article.tag.tagname}"></a></span>
        <button th:onclick="support([[${article.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${article.isSupport==0}" >
            <span class="article-viewinfo"> <i class="fa fa-thumbs-o-up"  style="color: cornflowerblue" th:text=" ${article.supportCount}" ></i>&nbsp;</span>
        </button>
        <button th:onclick="support([[${article.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${article.isSupport==1}">
            <span class="article-viewinfo"> <i class="fa fa-thumbs-o-up"  style="color: deeppink" th:text=" ${article.supportCount}"></i>&nbsp;</span>
        </button>
        <span class="article-viewinfo"><i class="fa fa-eye" th:text="${article.visitorVolume}"></i>&nbsp;</span>
        <span class="article-viewinfo"><i class="fa fa-commenting" th:text="${article.commentCount}"></i>&nbsp;</span>

    </div>
</div>
<!--分页-->
        <div class="layui-flow-more " style="background: white">
            <div class="page">
                <div>
<!--                    当前页是第一页时，不能使用上一页-->
                    <a class="prev" th:href="@{http://localhost:8080/qa/toPage/}+${ArticleList.current-1}" th:if="${ArticleList.current-1}>0">上一页</a>
                    <span class="current" style="color: mediumseagreen" th:text="${ArticleList.current}"></span>
<!--                    当前页是最后一页时，不能使用下一页-->
                    <a class="next" th:href="@{http://localhost:8080/qa/toPage/}+${ArticleList.current+1}" th:if="${ArticleList.current}!=${ArticleList.pages}">下一页</a>
                    <a class="num" href="" th:text="共 + ${ArticleList.pages} + 页"></a>
                    <div class="layui-inline layui-show-xs-block">
                        <input type="text" id="pageCount" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')" placeholder="页数" autocomplete="off" class="layui-input" style="width: 50px">
                    </div>
                    <div class="layui-inline layui-show-xs-block">
                        <button class="layui-btn" onclick="toWhichPage()"><i class="layui-icon">&#xe615;</i></button>
                    </div>
                    <a class="num" th:text="共 + ${ArticleList.total} + 条"></a>
                </div>
            </div>
        </div>
     </div>
     </div>

<!--标签分类页-->
        <div class="blog-main-right">
           <!--搜索框-->
            <div class="blog-search animated fadeInRight">
                <div class="layui-form-item">
                    <div class="search-keywords  shadow">
                        <input type="text" id="tagMessage" name="keywords" lay-filter="searchInput" lay-verify="required" placeholder="输入关键词搜索" autocomplete="off" class="layui-input">
                    </div>
                    <div class="search-submit  shadow">
                        <button class="search-btn" onclick="searchTag()"><i class="fa fa-search"></i></button>
                    </div>
                </div>
            </div>
            <!--标签分类-->
            <div class="article-category shadow categoryOut">
                <div class="article-category-title">分类导航</div>
                <a th:href="@{/article/tag/} + ${tag.id}" th:text="${tag.tagname}" th:each="tag:${tagList}"></a>
                <div class="clear"></div>
            </div>
            <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
        </div>
    </div>
    <div class="clear"></div>

    </div>
</div>
<!--页脚-->
<div th:insert="~{front/commons/commons.html :: down}"></div>
<div class="blog-mask animated layui-hide "></div>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/global.js}"></script>
<script th:inline="javascript">
    function support(articleId){
        $.get({
            url: "/article/support/article/" + articleId,
            success: function (data){
                if (data === "error"){
                    layer.msg("请先登录！")
                } else {
                    console.log(data)
                    location.href = "/QA/toPage/" + [[${ArticleList.current}]];
                }
            },
            error: function (){
                alert("失败")
            }
        })
    }
</script>
</body>
</html>